<template>
	<view>
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content"></block>
		</cu-custom>
		<!-- 背景圖 -->
		<image class="backImage" src="https://app.yycjkb.cn/index/fujiajia/111.png" mode="widthFix"></image>

		<view class="container">
			<!-- 錢包 -->
			<view class="money-bag">
				<image class="money-bag-image" src="https://app.yycjkb.cn/index/fujiajia/1332.png" mode="">
				</image>
				<!-- 用戶信息 -->
				<view class="user-info">
					<view class="user-info-left">
						<image v-if="userInfo.luohan==1" class="user-info-image" src="/static/luohan.png"
							mode="aspectFill">
						</image>
						<image v-else class="user-info-image" :src="userInfo.avatar || '/static/default_avatar.png'"
							mode=""></image>
						<view class="user-info-name">
							<view class="name">{{userInfo.nickname || '未登录用户'}}</view>
						</view>
					</view>
				</view>
				<!-- 信息 -->
				<view class="information">
					<view class="balance-section" v-for="(item, index) in info" :key="index">
						<view class="balance-label">
							<view class="label-text">
								{{item.title}}
							</view>
							<view class="balance-value">
								{{item.money}}元
							</view>
						</view>
						<view class="withdrawal-history-section" @click="handleButtonClick(item.btnName)">
							<view class="withdrawal-history-label">
								{{item.btnName}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 粉絲內容 -->
			<view class="small-assistant">
				<view class="income-content">
					<view class="income-title">
						收入明细
					</view>
					<view class="income">
						<view class="income-item" v-for="(item, index) in incomeList" :key="index">
							<view class="income-item-left">
								<view class="income-name">
									{{item.memo || '系统收益'}}
								</view>
								<view class="income-time">
									{{item.createtime | formatTime}}
								</view>
							</view>
							<view class="income-item-right">+{{item.money}}</view>
						</view>
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部tabbar -->
		<!-- <tabBar :selectIndex="selectIndex"></tabBar> -->
	</view>
</template>

<script>
	import tabBar from "../../components/tabBar/index.vue"
	import {
		mapState
	} from 'vuex';
	import banlance from '@/api/banlance';
	import user from '@/api/user';
	import dayjs from 'dayjs'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	export default {
		components: {
			tabBar,
			uniLoadMore
		},
		data() {
			return {
				selectIndex: 2,
				page: 1,
				loadStatus: 'more',
				userInfo: {},
				info: [{
						title: "账号余额",
						money: '0.00',
						field: 'money',
						btnName: "提现明细"
					},
					{
						title: "累计收入",
						money: '0.00',
						field: 'total_money',
						btnName: "去转账"
					},
					{
						title: "可提现金额",
						money: '0.00',
						field: 'withdrawable_balance',
						btnName: "去提现"
					},
					{
						title: "报单余额",
						money: '0.00',
						field: 'non_withdrawable_balance',
						btnName: "历史收入"
					},
				],
				incomeList: []
			};
		},
		filters: {
			formatTime(timestamp) {
				return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo']),
		},
		onLoad() {
			this.loadUserData()
			this.loadIncomeData()
		},
		onShow() {
			this.loadUserData()
		},
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.page++
				this.loadIncomeData()
			}
		},
		methods: {
			// 加载用户数据
			async loadUserData() {
				try {
					const res = await user.index()
					if (res.code === 1) {
						this.userInfo = res.data.user
						this.info.forEach(item => {
							item.money = parseFloat(res.data.user[item.field]).toFixed(2)
						})
					}
				} catch (e) {
					console.error('用户数据加载失败', e)
				}
			},

			// 加载收入数据
			async loadIncomeData() {
				this.loadStatus = 'loading'
				try {
					const res = await banlance.getRecord({
						page: this.page,
						tab: 'entry'
					})

					if (res.code === 1) {
						this.incomeList = [...this.incomeList, ...res.data.list]
						this.loadStatus = res.data.list.length < 10 ? 'noMore' : 'more'
					}
				} catch (e) {
					console.error('收入数据加载失败', e)
					this.loadStatus = 'more'
				}
			},

			// 按钮点击处理
			handleButtonClick(action) {
				const routeMap = {
					'提现明细': '/pages/my/balance/list',
					'去转账': '/pages/my/balance/transferMoney',
					'去提现': '/pages/my/balance/balance',
					'历史收入': '/pages/my/balance/history'
				}

				if (routeMap[action]) {
					uni.navigateTo({
						url: routeMap[action]
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 保持原有样式不变 */
	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.container {
		padding-top: 60rpx;
		padding-bottom: 20rpx;
		width: 690rpx;
		margin: auto;
		position: relative;

		.money-bag {
			padding-top: 30rpx;
			height: 297rpx;
			margin-bottom: 60rpx;

			.user-info {
				padding-top: 10rpx;
				width: 90%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.user-info-left {
					display: flex;

					.user-info-image {
						width: 117rpx;
						height: 117rpx;
						border-radius: 100rpx;
					}

					.user-info-name {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						padding: 10rpx 20rpx;

						.name {
							padding: 10rpx 0;
							font-size: 30rpx;
						}
					}
				}
			}

			.information {
				position: relative;
				margin: auto;
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				text-align: center;
				font-size: 24rpx;
				color: #fff;

				.label-text {
					font-size: 26rpx;
					font-weight: bold;
				}

				.withdrawal-history-label {
					padding: 5rpx 10rpx;
					border: 2rpx solid #fff;
					border-radius: 10rpx;
					margin-top: 15rpx;
					min-width: 120rpx;
				}
			}

			.money-bag-image {
				width: 100%;
				height: 297rpx;
				position: absolute;
			}
		}

		.small-assistant {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;
			min-height: 975rpx;
			position: relative;

			.income {
				padding: 20rpx 0;
			}

			.income-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f6f6f6;

				.income-item-left {
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.income-name {
						padding-bottom: 10rpx;
					}

					.income-time {
						color: #999999;
						font-size: 24rpx;
					}
				}

				.income-item-right {
					color: #f76e00;
				}
			}
		}
	}
</style>